<template>
  <qc-page-header @back="goBack"></qc-page-header>
  <user-form :user-id="userId" :unit-id="unitId"></user-form>
  <div class="user-form-user-dept-list">
    <user-dept-list v-if="userId" :user-id="userId"></user-dept-list>
  </div>
  <div class="user-form-user-role-list">
    <user-role-list v-if="userId" :user-id="userId"></user-role-list>
  </div>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import UserForm from './component/user-form.vue'
import { userIndexPageUrl } from './interface'
import UserDeptList from '/@/views/org/user-dept/user-dept-list.vue'
import UserRoleList from '../user-group-role/component/user-role-list.vue'
export default defineComponent({
  name: 'OrgUserForm',
  components: {
    UserForm,
    UserDeptList,
    UserRoleList,
  },
  setup() {
    const router = useRouter()
    const userId = router.currentRoute.value.params.id
    const unitId = router.currentRoute.value.query.unitId
    const goBack = () => router.push({ path: userIndexPageUrl })

    return {
      userId,
      unitId,
      goBack,
    }
  },
})
</script>
<style lang="less" scoped>
.user-form-user-dept-list,
.user-form-user-role-list {
  margin-top: 16px;
}
</style>